<template>
	<view class="page-container">
		<!-- 筛选区域 -->
		<view class="tech-card filter-section">
			<view class="card-title">
				<view class="title-icon">📅</view>
				<text>日签图管理</text>
			</view>

			<view class="filter-content">
				<view class="filter-left">
					<el-button @click="addBanner" class="tech-button primary-button">
						<text>➕ 新增日签图</text>
					</el-button>

					<el-date-picker v-model="bannerParams.time" type="month" placeholder="选择时间"
						size="small" @change="getData()" format="yyyy-MM" value-format="yyyy-MM"
						class="tech-date-picker" />
				</view>
			</view>
		</view>

		<!-- 数据表格区域 -->
		<view class="tech-card table-section">
			<view class="card-title">
				<view class="title-icon">📊</view>
				<text>日签列表</text>
				<text class="file-count" v-if="bannerList.length > 0">共 {{ bannerList.length }} 条数据</text>
			</view>

			<el-table :data="bannerList" class="tech-table" size="small"
				:header-cell-style="{ background: '#1a1f3a', color: '#00f0ff', fontWeight: 'bold' }"
				height="calc(100vh - 280px)">
				<el-table-column type="index" label="#" width="60" align="center" />

				<el-table-column prop="time" label="签到日期" width="140" align="center" />

				<el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />

				<el-table-column prop="image" label="图片" width="120" align="center">
					<template slot-scope="scope">
						<el-image v-if="scope.row.image" class="preview-image"
							:src="scope.row.image" :preview-src-list="[scope.row.image]" fit="cover" />
					</template>
				</el-table-column>

				<el-table-column prop="createdAt" label="创建日期" width="180" align="center" />

				<el-table-column fixed="right" label="操作" width="140" align="center">
					<template slot-scope="scope">
						<el-button type="text" class="action-button" @click="editThis(scope.row)">
							编辑
						</el-button>
						<el-button type="text" class="action-button delete-button" @click="deleteThis(scope.row)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<view class="pagination-wrapper">
				<el-pagination
					@current-change="handleCurrentChange"
					:current-page="params.pageNum"
					:page-sizes="[20, 40, 60, 80, 100]"
					:page-size="params.pageSize"
					:total="maxCount"
					layout="total, sizes, prev, pager, next, jumper"
					background>
				</el-pagination>
			</view>
		</view>

		<el-dialog title="选择文件" :visible.sync="dialogShow" top="10vh" width="90%" class="tech-dialog">
			<view class="dialog-content">
				<view class="search-wrapper">
					<el-input placeholder="请输入搜索关键词" v-model="params.searchText" @change="getArtpptData"
						size="small" class="tech-input" />
				</view>
				<el-table :data="artpptList" class="tech-table" size="small"
					:header-cell-style="{ background: '#1a1f3a', color: '#00f0ff', fontWeight: 'bold' }"
					height="calc(80vh - 200px)">
					<el-table-column type="index" label="#" width="60" align="center" />
					<el-table-column prop="number" label="编号" width="120" show-overflow-tooltip />
					<el-table-column prop="classDesc" label="分类" width="120" />
					<el-table-column prop="title" label="标题" width="150" show-overflow-tooltip />
					<el-table-column prop="desc" label="描述" min-width="180" show-overflow-tooltip />
					<el-table-column prop="age" label="适合年龄" width="100" align="center" />
					<el-table-column prop="type" label="类型" width="100" align="center" />
					<el-table-column prop="price" label="价格" width="80" align="center">
						<template slot-scope="scope">
							<view class="price-tag">¥{{ scope.row.price }}</view>
						</template>
					</el-table-column>
					<el-table-column prop="images" label="图片" width="100" align="center">
						<template slot-scope="scope">
							<el-image class="preview-image" :src="scope.row.images[0]"
								:preview-src-list="scope.row.images" fit="cover" />
						</template>
					</el-table-column>
					<el-table-column prop="downLoadNum" label="下载次数" width="100" align="center">
						<template slot-scope="scope">
							<view class="download-count">{{ scope.row.downLoadNum || 0 }}</view>
						</template>
					</el-table-column>
					<el-table-column prop="createdAt" label="创建日期" width="180" align="center" />
					<el-table-column fixed="right" label="操作" width="100" align="center">
						<template slot-scope="scope">
							<el-button type="text" class="action-button"
								@click="bannerAddEditParams.artpptId=scope.row.objectId,bannerAddEditParams.artpptName=scope.row.title,dialogShow=false">
								选择
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<view class="pagination-wrapper">
					<el-pagination
						@current-change="handleCurrentChange"
						:current-page="params.pageNum"
						:page-sizes="[20, 40, 60, 80, 100]"
						:page-size="params.pageSize"
						:total="maxCount"
						layout="total, sizes, prev, pager, next, jumper"
						background>
					</el-pagination>
				</view>
			</view>
		</el-dialog>

		<el-dialog title="日签图编辑" :visible.sync="bannerShow" top="10vh" width="50%" class="tech-dialog">
			<view class="dialog-content">
				<view class="upload-section">
					<view class="upload-label">日签图片：</view>
					<view class="upload-area" @click="select">
						<el-image v-if="bannerAddEditParams.image" class="uploaded-image"
							:src="bannerAddEditParams.image" fit="cover" />
						<view v-else class="upload-placeholder">
							<text class="upload-icon">📷</text>
							<text class="upload-text">点击上传日签图</text>
						</view>
					</view>
				</view>

				<view class="form-section">
					<view class="form-item">
						<view class="form-label">标题：</view>
						<el-input placeholder="请输入标题" v-model="bannerAddEditParams.title"
							size="small" class="tech-input" />
					</view>

					<picker mode="date" @change="(e)=>{bannerAddEditParams.time = e.detail.value}">
						<view class="form-item">
							<view class="form-label">日期：</view>
							<el-input placeholder="请输入日期" v-model="bannerAddEditParams.time"
								size="small" class="tech-input" />
						</view>
					</picker>

					<view class="form-item" @click="dialogShow = true,getArtpptData()">
						<view class="form-label">关联文件：</view>
						<el-input placeholder="请选择关联文件" size="small" class="tech-input"
							:value="bannerAddEditParams.artpptName" />
					</view>
				</view>
			</view>

			<span slot="footer" class="dialog-footer">
				<el-button @click="bannerShow = false" size="small" class="tech-button">取 消</el-button>
				<el-button type="primary" @click="confirmAdd" size="small" class="tech-button primary-button">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	import UUID from 'uuid';
	import {
		VueCropper
	} from 'vue-cropper'
	import uploadFile from '@/js_sdk/tencentcloud/upload-file.js';
	import getFileAccessUrl from '@/js_sdk/tencentcloud/getFileAccessUrl';

	let that
	export default {
		components: {
			VueCropper
		},
		data() {
			return {
				dialogShow: false,
				bannerShow: false,
				bannerShow1: false,

				chooseItem: '',
				artpptList: [],
				bannerList: [],
				maxCount: 1,
				maxPage: 1,

				bannerAddEditParams: {
					time: '',
					image: '',
					artpptId: '',
					artpptName: '',
					title: '',
				},

				bannerParams: {
					time: '',
				},

				params: {
					pageSize: 20,
					pageNum: 1,
					typeDesc: '',
					searchText: '',
				}
			}
		},

		onLoad() {
			that = this
			that.bannerParams.time = that.common.getMonth(0)
			that.bannerAddEditParams.time = that.common.getDay(0)
			that.getData()
		},

		methods: {

			async select() {
				// let urls = []
				// let [error, res] = await uni.chooseImage({
				// 	count: 1,
				// 	sizeType: "compressed",
				// });
				// if (error) {
				// 	throw error;
				// }

				// console.log(res)
				// // #ifdef H5
				// if (!/^image/.test(res.tempFiles[0].type)) {
				// 	throw new Error('文件类型错误');
				// }
				// // #endif
				// uni.showLoading({
				// 	title: "上传中...",
				// 	mask: true,
				// });
				// try {
				// 	let files = res.tempFilePaths;
				// 	// #ifdef H5
				// 	files = res.tempFiles;
				// 	// #endif
				// 	for (let file of files) {
				// 		let url = await uploadFile(file, file.name, "dayCheckImages");
				// 		that.bannerAddEditParams.image = 'https://' + url
				// 	}
				// 	return urls;
				// } catch (error) {
				// 	throw error;
				// } finally {
				// 	uni.hideLoading();
				// }

				uni.chooseImage({
					count: this.imageNum, //最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
					success: res => {
						let that = this
						let files = res.tempFiles
						let promises = []
						for (let file of files) {
							let promise = new Promise(function(resolve, reject) {

								let filePath = undefined;
								let fileExt;
								if (typeof file === 'string') {
									filePath = file;
									file = undefined;
									fileExt = filePath.split('?')[0].split('.').pop();
								} else {
									fileExt = file.name.split('.').pop();
								}
								// 支付宝小程序上传文件API必传fileType
								// 通过支付宝小程序环境下选择文件的时候，通过返回的filePath取得的扩展名可能是image/video/audio
								let fileType = undefined;
								// ifdef MP-ALIPAY
								if (fileExt === 'image') {
									fileExt = 'jpg';
								} else if (fileExt === 'video') {
									fileExt = 'mp4';
								} else if (fileExt === 'audio') {
									fileExt = 'mp3';
								} else if (fileExt === 'zip') {
									fileExt = 'zip';
								}
								fileType = that.getMediaType(fileExt);
								let fileName = `${UUID.v1()}.${fileExt}`;
								/**
								 * 参数：
								 * 1.file：要上传的文件选择器或者文件对象
								 *2. filename_qn：上传到七牛后保存的文件名。如果不指定，则由七牛服务器自动生成。
								 *3. token：上传凭证，详见 上传策略
								 */
								// 上传以后的文件名-存在七牛云的文件名字-空间的域名+文件名就可以访问文件了！最好做时间戳+随机数这样做一个唯一的文件名字
								const filename_qn = "bannerImages/" + that.common.getDay(0) + "/" + fileName;
								// console.log('上传前生成的文件名字：', filename_qn)
								// 发起请求,获取上传文件需要的uploadToken
								uni.request({
									url: 'https://fc-mp-d19b9f62-6e96-422b-8eb6-44b08a354d76.next.bspapp.com/uploadQiNiu',
									method: 'POST',
									// data: {},
									success: (res) => {
										const token = res.data.uploadToken;
										// 获取成功后发起文件上传
										/**
										 * url:我这里是（https://upload-z2.qiniup.com）：华南-广东 对应的七牛云的地址-其他的可以自行百度
										 * filePath：文件本地临时地址，一次只能一个，字符串类型
										 */
										uni.uploadFile({
											url: 'https://upload-cn-east-2.qiniup.com',
											filePath: file.path,
											name: 'file',
											formData: {
												'key': filename_qn, // 存到七牛云后的文件名字，访问图片会用到
												'token': token, // uploadToken，需要动态获取，调用云函数接口获取
											},
											// 存成功后的回调
											success: (uploadFileRes) => {
												let key = JSON.parse(uploadFileRes.data).key;
												// 空间绑定的域名（在七牛云配置）+key就是文件的访问地址
												const img_url = 'https://qiniu.jimuzhou.cloud/' + key
												resolve(img_url)
											},
											fail: (err) => {
												console.log('上传失败了', err);
												uni.hideLoading();
											}
										});
									}
								})
							})
							promises.push(promise)
						}
						Promise.all(promises).then(function(res) {
							that.bannerAddEditParams.image =   res[0] 
						});
					}
				});
			},
			
			getMediaType(ext) {
				if (/^(jpg|jpeg|png|gif|bmp|webp)$/.test(ext.toLowerCase())) {
					return 'image';
				}
				if (/^(mp4|mpeg|qsv|mov|avi|3gp)$/.test(ext.toLowerCase())) {
					return 'video';
				}
				if (/^(mp3|wma|wav|m4a)$/.test(ext.toLowerCase())) {
					return 'audio';
				}
				return 'other';
			},
			
			getcropImage() {
				this.$refs.cropper.getCropBlob(async data => {
					// do something

				})
			},

			cblobToFile(blob, fileName) {
				return new window.File([blob], fileName, {
					type: blob.type
				})
			},

			addBanner() {
				that.bannerShow = true
				delete that.bannerAddEditParams.objectId
			},

			editThis(item) {
				that.bannerAddEditParams.image = item.image
				that.bannerAddEditParams.objectId = item.objectId
				that.bannerAddEditParams.artpptId = item.artpptId
				that.bannerAddEditParams.artpptName = item.artPPTName
				that.bannerAddEditParams.title = item.title
				that.bannerAddEditParams.time = item.time
				that.bannerShow = true
			},

			deleteThis(item) {
				uni.showModal({
					content: "是否删除此条目",
					success(res) {
						if (res.confirm) {
							that.$http.Post("admin/todayBranner/remove", {
								objectId: item.objectId
							}, "加载中...").then(res => {
								that.getData()
							})
						}
					}
				})
			},

			//添加日签图
			confirmAdd() {
				this.$http.Post("admin/todayBranner/save", that.bannerAddEditParams, "加载中...").then(res => {
					that.bannerShow = false
					that.getData()
				})
			},

			handleCurrentChange(value) {
				that.params.pageNum = value
				that.getArtpptData()
			},

			//获取日签图
			getData() {
				this.$http.Post("admin/todayBranner/list", that.bannerParams, "加载中...").then(res => {
					this.bannerList = res.data
				})
			},

			getArtpptData() {
				this.$http.Post("admin/artPPT/list", that.params, "加载中...").then(res => {
					this.artpptList = res.data
					that.maxCount = res.maxCount
					that.maxPage = res.maxPage
				})
			}
		}
	}
</script>

<style scoped>
/* ==================== 全局容器 ==================== */
.page-container {
	min-height: 100vh;
	padding: 16px;
	background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1729 100%);
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==================== 科技卡片 ==================== */
.tech-card {
	background: rgba(26, 31, 58, 0.6);
	backdrop-filter: blur(10px);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	border: 1px solid rgba(0, 240, 255, 0.2);
	box-shadow:
		0 8px 32px rgba(0, 240, 255, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.tech-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #00f0ff, transparent);
	animation: scan 3s infinite;
}

@keyframes scan {
	0%, 100% {
		left: -100%;
	}
	50% {
		left: 100%;
	}
}

.tech-card:hover {
	border-color: rgba(0, 240, 255, 0.4);
}

/* ==================== 卡片标题 ==================== */
.card-title {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: #00f0ff;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.title-icon {
	margin-right: 6px;
	font-size: 18px;
	filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
}

.file-count {
	margin-left: auto;
	font-size: 12px;
	color: #7f8ea3;
	font-weight: normal;
	background: rgba(0, 240, 255, 0.1);
	padding: 2px 10px;
	border-radius: 10px;
	border: 1px solid rgba(0, 240, 255, 0.2);
}

/* ==================== 筛选区域 ==================== */
.filter-content {
	display: flex;
	gap: 16px;
	align-items: center;
}

.filter-left {
	display: flex;
	gap: 16px;
	align-items: center;
	flex: 1;
}

/* ==================== 科技按钮 ==================== */
.tech-button {
	padding: 8px 20px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.3px;
	transition: all 0.3s ease !important;
	border: none !important;
	position: relative;
	overflow: hidden;
	height: 36px;
}

.primary-button {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	color: #0a0e27 !important;
	box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

/* ==================== 日期选择器 ==================== */
.tech-date-picker >>> .el-input__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	height: 36px;
	transition: all 0.3s ease;
}

.tech-date-picker >>> .el-input__inner:hover {
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.tech-date-picker >>> .el-input__inner:focus {
	border-color: #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

.tech-date-picker >>> .el-input__icon {
	color: #00f0ff;
}

/* ==================== 表格区域 ==================== */
.table-section {
	height: calc(100vh - 200px);
	display: flex;
	flex-direction: column;
}

/* ==================== 表格样式 ==================== */
.tech-table {
	width: 100%;
	flex: 1;
}

.tech-table >>> .el-table {
	background: transparent !important;
	color: #e0e6ed;
}

.tech-table >>> .el-table::before {
	background: transparent !important;
}

.tech-table >>> .el-table th,
.tech-table >>> .el-table tr {
	background: transparent !important;
}

.tech-table >>> .el-table td,
.tech-table >>> .el-table th.is-leaf {
	border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
}

.tech-table >>> .el-table td {
	color: #b8c5d6 !important;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
}

.tech-table >>> .el-table__body tr {
	background: rgba(10, 14, 39, 0.3) !important;
	transition: all 0.3s ease;
	border-left: 3px solid transparent;
}

.tech-table >>> .el-table__body tr:hover {
	background: linear-gradient(90deg,
		rgba(0, 240, 255, 0.2) 0%,
		rgba(0, 240, 255, 0.15) 50%,
		rgba(0, 240, 255, 0.05) 100%) !important;
	border-left-color: #00f0ff;
}

.tech-table >>> .el-table__body tr:hover td {
	color: #e0e6ed !important;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {
	background: rgba(10, 14, 39, 0.5);
	border-radius: 4px;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
	background: rgba(0, 240, 255, 0.3);
	border-radius: 4px;
	transition: background 0.3s;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 240, 255, 0.5);
}

/* ==================== 价格标签 ==================== */
.price-tag {
	color: #00ff88;
	font-weight: 600;
	font-size: 13px;
	text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* ==================== 下载次数 ==================== */
.download-count {
	color: #ffaa00;
	font-weight: 600;
	font-size: 13px;
}

/* ==================== 预览图片 ==================== */
.preview-image {
	width: 50px !important;
	height: 50px !important;
	border-radius: 6px;
	border: 2px solid rgba(0, 240, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	object-fit: cover;
}

.preview-image:hover {
	border-color: #00f0ff;
	transform: scale(1.1);
}

/* ==================== 操作按钮 ==================== */
.action-button {
	color: #00f0ff !important;
	font-weight: 600 !important;
	padding: 4px 8px !important;
	transition: all 0.3s ease !important;
	background: transparent !important;
	border-radius: 4px;
	font-size: 13px !important;
}

.action-button:hover {
	background: rgba(0, 240, 255, 0.1) !important;
}

.delete-button:hover {
	color: #ff4757 !important;
	background: rgba(255, 71, 87, 0.1) !important;
}

/* ==================== 分页器 ==================== */
.pagination-wrapper {
	display: flex;
	justify-content: flex-end;
	padding: 16px 0 0 0;
	margin-top: 12px;
	border-top: 1px solid rgba(0, 240, 255, 0.1);
}

.pagination-wrapper >>> .el-pagination.is-background .btn-next,
.pagination-wrapper >>> .el-pagination.is-background .btn-prev,
.pagination-wrapper >>> .el-pagination.is-background .el-pager li {
	background: rgba(10, 14, 39, 0.6) !important;
	color: #b8c5d6 !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	border-radius: 6px;
	margin: 0 2px;
	transition: all 0.3s ease;
}

.pagination-wrapper >>> .el-pagination.is-background .el-pager li:hover,
.pagination-wrapper >>> .el-pagination.is-background .btn-next:hover,
.pagination-wrapper >>> .el-pagination.is-background .btn-prev:hover {
	color: #00f0ff !important;
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.pagination-wrapper >>> .el-pagination.is-background .el-pager li.active {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(0, 153, 204, 0.3) 100%) !important;
	color: #00f0ff !important;
	border-color: #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	font-weight: 600;
}

.pagination-wrapper >>> .el-pagination__total,
.pagination-wrapper >>> .el-pagination__jump {
	color: #b8c5d6 !important;
}

.pagination-wrapper >>> .el-input__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
}

/* ==================== 弹窗样式 ==================== */
.tech-dialog >>> .el-dialog {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid rgba(0, 240, 255, 0.3);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.tech-dialog >>> .el-dialog__header {
	background: rgba(10, 14, 39, 0.8);
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
	padding: 16px 20px;
}

.tech-dialog >>> .el-dialog__title {
	color: #00f0ff;
	font-weight: 600;
	font-size: 16px;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.tech-dialog >>> .el-dialog__headerbtn .el-dialog__close {
	color: #00f0ff;
}

.tech-dialog >>> .el-dialog__headerbtn:hover .el-dialog__close {
	color: #ff4757;
}

.tech-dialog >>> .el-dialog__body {
	padding: 20px;
	background: rgba(10, 14, 39, 0.3);
}

.tech-dialog >>> .el-dialog__footer {
	background: rgba(10, 14, 39, 0.5);
	border-top: 1px solid rgba(0, 240, 255, 0.2);
	padding: 12px 20px;
}

.dialog-content {
	width: 100%;
}

/* ==================== 搜索区域 ==================== */
.search-wrapper {
	margin-bottom: 16px;
}

.tech-input >>> .el-input__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	transition: all 0.3s ease;
}

.tech-input >>> .el-input__inner:hover {
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.tech-input >>> .el-input__inner:focus {
	border-color: #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

.tech-input >>> .el-input__inner::placeholder {
	color: #4a5568;
}

/* ==================== 上传区域 ==================== */
.upload-section {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.upload-label {
	color: #00f0ff;
	font-size: 14px;
	font-weight: 600;
}

.upload-area {
	width: 200px;
	height: 200px;
	border: 2px dashed rgba(0, 240, 255, 0.3);
	border-radius: 8px;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.3s ease;
	background: rgba(10, 14, 39, 0.5);
}

.upload-area:hover {
	border-color: #00f0ff;
	background: rgba(0, 240, 255, 0.1);
}

.uploaded-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.upload-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.upload-icon {
	font-size: 48px;
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
}

.upload-text {
	color: #7f8ea3;
	font-size: 13px;
}

/* ==================== 表单区域 ==================== */
.form-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.form-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.form-label {
	min-width: 80px;
	color: #00f0ff;
	font-size: 14px;
	font-weight: 500;
}

/* ==================== 下拉菜单深色样式 ==================== */
.el-select-dropdown {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.el-select-dropdown__item {
	color: #e0e6ed !important;
	background: transparent !important;
}

.el-select-dropdown__item:hover {
	background: rgba(0, 240, 255, 0.2) !important;
}

.el-select-dropdown__item.selected {
	color: #00f0ff !important;
	font-weight: 600;
}

/* ==================== 日期选择器下拉样式 ==================== */
.el-picker-panel {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.el-picker-panel__body {
	background: transparent !important;
}

.el-date-picker__header-label,
.el-picker-panel__icon-btn {
	color: #00f0ff !important;
}

.el-month-table td .cell {
	color: #e0e6ed !important;
}

.el-month-table td.current:not(.disabled) .cell {
	color: #00f0ff !important;
	font-weight: 600;
}

.el-month-table td.today .cell {
	color: #00f0ff !important;
}

.el-month-table td:hover .cell {
	background: rgba(0, 240, 255, 0.2) !important;
}

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
	.page-container {
		padding: 12px;
	}

	.tech-card {
		padding: 12px;
		margin-bottom: 12px;
	}

	.filter-content {
		flex-direction: column;
		align-items: flex-start;
	}

	.filter-left {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}
}
</style>